
import {useEffect, useState} from 'react'


/**
 * 参数二依赖项，不同，会有不同的执行表现
 *    1.没有依赖项：组件初始化渲染+组件更新执行
 *    2.空数组依赖项：只在初始渲染执行一次
 *    3.添加指定依赖项：组件初始渲染+特性依赖项变时执行
 */





function App() {

  const [count,setCount] = useState(0)
  useEffect(()=>{
    // 1.没有依赖项：组件初始化渲染+组件更新执行   ->  所有组件只要有一个组件进行更新，就会进行执行
    console.log('副作用函数执行00')
  })

  useEffect(()=>{
    // 2.空数组依赖项，只会在初始化渲染执行一次
    console.log('副作用函数执行01')
  },[])

  useEffect(()=>{
    //3.添加指定依赖项，指定依赖项中的组件进行初始渲染和更新时进行更新
    console.log('副作用函数执行02')
  },[count]) /** count发生改变时，副作用函数进行执行 */

  return (
    <div>
      this is App
      {/** 组件进行更新时，副作用函数进行执行 */}
      <button onClick={()=>{setCount(count+1)}}>update</button>
    </div>
  )
}

export default App;
